<template>
  <view class="page-index">
    <view class="index-content">这是文案</view>

    <button @click="onOpenRule">打开规则弹窗</button>
    <button @click="onOpenMsg">打开消息弹窗</button>
    <button @click="onOpenMsgAsync">打开消息弹窗（异步方法）</button>
  </view>
</template>

<script>
export default {
  data () {
    return {}
  },
  components: {},
  onLoad (options) {},
  computed: {},

  methods: {
    onOpenRule () {
      this.$openPop('rule')
    },
    onOpenMsg () {
      this.$openPop('msg', {
        title: '弹窗标题',
        message: '消息弹窗的测试文字',
        showCancel: true
      }, action => {
        console.log(action)
        this.$toast('弹窗关闭，action: ' + action)
      })
    },
    async onOpenMsgAsync () {
      const action = await this.$openPopAsync('msg', { message: '是否确认弹窗' })
      if (action === 'confirm') {
        this.$toast('确认了弹窗')
      } else {
        this.$toast('没有确认弹窗')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.page-index {
  position: relative;
  width: 750rpx;
  height: 100vh;
  background-image: url('../../static/images/index/bg.jpg');
  background-size: cover;
  margin: 0 auto;
  .index-content {
    font-size: 40rpx;
    color: rgb(0, 0, 0);
  }
}
</style>
